<template>
	<view class="page-wrapper">
		<div class="content">
			<ul>
				<li @click="goPersonalInfo">
					<image src="../../../static/img/member/avatar.png" mode="widthFix"></image>
					<div>
						<h3>刘一碗</h3>
						<p>ID:15243425364</p>
					</div>
					<span>
						<image src="../../../static/img/public/right.png" mode="widthFix"></image>
					</span>
				</li>
				<li @click="goChangePhone">
					<h3>
						更换手机号
					</h3>
					<p>15288****98</p>
					<span>
						<image src="../../../static/img/public/right.png" mode="widthFix"></image>
					</span>
				</li>
				
			</ul>
		</div>
		<button>
			退出登录
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goChangePhone() {
				uni.navigateTo({
					url: 'changePhoneOld/changePhoneOld'
				})
			},
			goPersonalInfo() {
				uni.navigateTo({
					url: 'personalInfo/personalInfo'
				})
			}
		}
	}
</script>

<style scoped>
	.page-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding-bottom: 40rpx;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx 30rpx 30rpx;
		flex-grow: 1;
	}
	.content>ul {
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
	}
	.content>ul>li {
		width: 100%;
		height: 140rpx;
		box-sizing: border-box;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eeeeee;
	}
	.content>ul>li:last-child {
		border: none
	}
	.content>ul>li>image {
		width: 101rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}
	.content>ul>li>div {
		flex-grow: 1;
	}
	.content>ul>li>div>h3 {
		font-size: 30rpx;
		color: #333333;
	}
	.content>ul>li>div>p {
		font-size: 22rpx;
		color: #999999;
		margin-top:10rpx;
	}
	
	.content>ul>li>span {
		flex-shrink: 0;
	}
	.content>ul>li>span>image {
		width: 17rpx;
	}
	
	.content>ul>li>h3 {
		flex-shrink: 0;
		font-size: 30rpx;
		color: #333333;
	}
	.content>ul>li>p {
		flex-grow: 1;
		font-size: 24rpx;
		color: #999999;
		text-align: end;
		box-sizing: border-box;
		padding-right: 20rpx;
	}
	
	.page-wrapper>button {
		flex-shrink: 0;
		background-image: linear-gradient(to right, #0973F7, #0286FA);
		width: 602rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border:none;
		color: #ffffff;
		font-size: 34rpx;
	}
	
</style>
